import React, {Component} from 'react';
import {Text, View, Image, StyleSheet} from 'react-native';

let ads_img = require('~/assets/ads/start_ad.jpg');
let t = 0;
export default class FullScreenAds extends Component {
    static navigationOptions = {
        headerTransparent: true,
    };

    state = {
        time: 3,
    };

    constructor(props) {
        super(props);
    }

    toHome = () => {
        clearInterval(t);
        if (global.AppData.versionName === 'dev') {
            this.props.navigation.navigate('SelectRole');
        } else {
            this.props.navigation.navigate('NavigatorTab');
        }
    };

    timer = () => {
        t = setInterval(() => {
            let sec = this.state.time;
            this.setState({
                time: --sec,
            });
            if (sec < 0) {
                this.toHome();
            }
        }, 1000);
    };

    render() {
        return (
            <View
                style={[global.AppData.view_center, {backgroundColor: 'white'}]}
                onLayout={() => {
                    this.timer();
                }}>
                <View style={{width: '100%', height: global.AppData.screen_height - 50, position: 'absolute', top: 0, left: 0}}>
                    <Image style={{width: '100%', height: '100%', resizeMode: 'stretch'}} source={ads_img} />
                </View>
                <View style={{width: '100%', height: 50, backgroundColor: '#fff', justifyContent: 'center', position: 'absolute', bottom: 0}}>
                    <Text
                        onPress={() => {
                            this.toHome();
                        }}
                        style={{
                            fontSize: 12,
                            paddingHorizontal: 15,
                            paddingVertical: 5,
                            borderRadius: 15,
                            borderColor: 'lightgray',
                            borderWidth: StyleSheet.hairlineWidth,
                            alignSelf: 'flex-end',
                            marginRight: 15,
                        }}>
                        <Text style={{color: global.AppData.main_color}}>{this.state.time}</Text>
                        跳过
                    </Text>
                </View>
            </View>
        );
    }
}
